<template>
    <div id="register">
        <div class="content">
            <div style="display: block;">
                <p>用户名</p>
                <input type="text" placeholder="请输入账号" v-model="userName" />
                <p>昵称</p>
                <input type="text" placeholder="请输入昵称" v-model="nickName" />
                <p>密码</p>
                <input type="password" placeholder="请输入密码" v-model="password" />
                <p>确认密码</p>
                <input type="password" placeholder="请确认密码" v-model="confirmPassword" />
                <br />
                <input type="submit" value="注册" @click.prevent="btn_register">
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    // el: '#register',
    data() {
        return {
            userName: '',
            nickName: '',
            password: '',
            confirmPassword: '',
        }
    },
    methods: {
        btn_register() {
            if (this.nickname != '' && this.username != '' && this.password != '' && this.password === this.confirmPassword != '') {
                // 构造注册数据对象
                const registerData = {
                    userName: this.userName,
                    password: this.password,
                    nickName: this.nickName,
                };
                axios({
                    method: "post",
                    url: "http://localhost:8085/user/registerCustomer",
                    data: registerData
                }).then((res) => {
                    // 注册成功，返回登录页面
                    alert('注册成功，请登录');
                    this.$router.push('/login')
                    // window.location.href = "login.html"
                }).catch((error) => {
                    // 注册失败，处理错误信息
                    alert('注册失败：' + error.message);
                });
            } else {
                alert('请输入有效的账号和密码，并确保两次输入的密码一致');
            }
        },
    }
}
</script>

<style scoped>
#register {
    width: 340px;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

.item {
    width: 340px;
    height: 60px;
    background: #eeeeee;
}

.item div {
    width: 170px;
    height: 60px;
    display: inline-block;
    color: black;
    font-size: 18px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
}

.content {
    width: 100%;
}

.content div {
    margin: 20px 30px;
    display: none;
    text-align: left;
}

p {
    color: #4a4a4a;
    margin-top: 30px;
    margin-bottom: 6px;
    font-size: 15px;
}

.content input[type="text"],
.content input[type="password"] {
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #adadad;
    padding: 0 10px;
    box-sizing: border-box;
}

.content input[type="submit"] {
    margin-top: 40px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    color: white;
    border: 1px solid #adadad;
    background: #00dd60;
    cursor: pointer;
    letter-spacing: 4px;
    margin-bottom: 40px;
}

.active {
    background: white;
}

.item div:hover {
    background: #f6f6f6;
}
</style>